<template>
    <div class="head"><van-icon name="arrow-left" class="icon" @click="go" /></div>
    <div class="detail">
        <div class="img" v-if="arr.result">
            <img :src="arr.result.product_img" alt="" />
        </div>
        <div class="content">
            <div class="price"><span class="symbol">￥</span>{{ arr.result.product_price }}</div>
            <div class="product_name">{{ arr.result.product_name }}</div>
        </div>
        <div class="select">
            <div class="myselect">
                <div class="select_left">选择</div>
                <div class="select_right">数量:<van-stepper v-model="product_num" /></div>
            </div>
            <!-- <div class="myselect">
                <div class="select_left">送至</div>
                <div class="select_right">广东省广州市从化区</div>
            </div> -->
            <div class="myselect">
                <div class="select_left">支付</div>
                <div class="select_right">在线支付</div>
            </div>
        </div>
        <div class="commodity_details">
            <van-tabs v-model:active="active">
                <van-tab title="商品介绍"> {{ arr.result.products_introduction }}</van-tab>
                <van-tab title="售后保障">售后保障</van-tab>
            </van-tabs>
        </div>
    </div>
    <div class="cont"></div>
    <div class="conn">
        <van-action-sheet v-model:show="show" title=" ">
            <div class="content">
                <div class="content-box">
                    <div class="box-img">
                        <img :src="arr.result.product_img" alt="" />
                    </div>
                    <div class="box-res">
                        <div class="box-content">{{ arr.result.product_name }}</div>
                        <div class="box-price"><span class="symbol">￥</span>{{ arr.result.product_price }}</div>
                    </div>
                </div>
                <div class="myselect"><span>数量:</span><van-stepper v-model="product_num" /></div>
                <div class="buy"><van-action-bar-button type="danger" text="立即购买" @click="buyProduct" /></div>
            </div>
        </van-action-sheet>
    </div>
    <footer>
        <div class="buy">
            <van-action-bar>
                <van-action-bar-icon icon="cart-o" text="购物车" @click="oncart" />
                <van-action-bar-icon icon="star-o" text="未收藏" color="#ff5000" v-if="iscollect == false" @click="addcollect" />
                <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" v-if="iscollect == true" @click="deletecollect" />
                <van-action-bar-button type="warning" text="加入购物车" @click="join" />
                <van-action-bar-button type="danger" text="立即购买" @click="tan" />
            </van-action-bar>
        </div>
    </footer>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { getDetail, joinCart, getIsCollect, addCollect, deleteCollect } from "../../request/index";
import { showToast } from "vant";
let store = useStore();
let router = useRouter();
let route = useRoute();
let userid = ref("");
let pid = ref("");
let product_num = ref(1);
let arr = reactive({ result: [] });
let username = ref("");
const active = ref(0);
let show = ref(false);
let iscollect = ref(false);

let id = route.query.id;
pid.value = route.query.id;
userid.value = localStorage.getItem("user_id");
getIsCollect({ user_id: userid.value, product_id: pid.value }).then((res) => {
    if (res.data.length == 1) {
        iscollect.value = true;
    } else {
        iscollect.value = false;
    }
});
getDetail({ index_product_id: id })
    .then((data) => {
        arr.result = data.data[0];
        console.log(arr.result);
    })
    .catch((err) => {
        console.log(err);
    });

//立即购买
let buyProduct = () => {
    console.log(arr.result);
    let arrs = [];
    let obj = {
        product_img: arr.result.product_img,
        product_name: arr.result.product_name,
        product_price: arr.result.product_price,
        product_id: arr.result.index_product_id,
        product_num: product_num.value,
        user_id: userid.value,
    };
    arrs.push(obj);
    store.commit("myindex/changeArr", arrs);
    router.push({ path: "/clear" });
};
//添加收藏
let addcollect = () => {
    addCollect({
        user_id: userid.value,
        product_id: pid.value,
        product_img: arr.result.product_img,
        product_name: arr.result.product_name,
        product_price: arr.result.product_price,
    }).then((res) => {
        iscollect.value = true;
        showToast(res.msg);
    });
};
let deletecollect = () => {
    deleteCollect({ product_id: pid.value, user_id: userid.value }).then((res) => {
        showToast(res.msg);
        console.log(res);
        if (res.code == 200) {
            iscollect.value = false;
        }
    });
};

let tan = () => {
    show.value = true;
};
//加入购物车

let join = () => {
    if (userid.value == undefined) {
        router.push({ path: "/loginregister/login" });
        return;
    }
    let product_img = arr.result.product_img;
    let product_name = arr.result.product_name;
    // let product_num = ;
    let product_price = arr.result.product_price;
    // console.log(pid.value, userid.value, product_img, product_name, product_num, product_price);
    // (product_id, user_id, product_img, product_name, product_num, product_price)
    joinCart({ product_id: pid.value, user_id: userid.value, product_img: product_img, product_name: product_name, product_num: product_num.value, product_price: product_price }).then((res) => {
        showToast(res.msg);
    });
};
let oncart = () => {
    if (userid.value == undefined) {
        router.push({ path: "/loginregister/login" });
        return;
    }
    router.push({ path: "/myindex/shoppingcart" });
};
let go = () => {
    router.go(-1);
};
</script>

<style lang="scss" scoped>
:root:root {
    --van-tabs-bottom-bar-color: #ff5154;
}
.conn {
    .content {
        padding: 16px 16px 160px;
        height: 120px;
        .myselect {
            margin: 1.25rem 0;
            display: flex;
            justify-content: space-between;
            span {
                display: flex;
                align-items: center;
            }
        }
        .content-box {
            display: flex;
            padding-top: 1.5625rem;

            .box-img {
                // box-sizing: border-box;
                width: 120px;
                height: 120px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .box-res {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 0 0.9375rem;
                box-sizing: border-box;

                .box-content {
                    box-sizing: border-box;
                    font-size: 15px;
                    color: #666666;
                }
                .box-price {
                    box-sizing: border-box;
                    color: #ff5154;
                    padding-bottom: 0.625rem;
                    font-size: 1.25rem;
                    .symbol {
                        font-size: 1rem;
                    }
                }
            }
        }
    }
}
.head {
    box-sizing: border-box;
    padding: 0.625rem;
    height: 2.5rem;
    width: 100%;
    position: fixed;
    top: 0;
    .icon {
        font-size: 1.5625rem;
        color: #666666;
    }
}
.van-tab__panel {
    padding: 0.9375rem 1.25rem;
    white-space: normal; //设置文字换行
    word-wrap: break-word; //设置数字强制换行
    line-height: 1.4375rem;
}

.detail {
    background-color: #f7f7f7;
    margin-bottom: 3.4375rem;
    .img {
        width: 100%;
        height: 26.25rem;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .content {
        padding: 0.9375rem 0.625rem;
        box-sizing: border-box;
        width: 95%;
        border-radius: 0.75rem;
        margin: 0.625rem auto;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        .price {
            color: #ff5154;
            font-size: 1.5rem;
            box-sizing: border-box;
            padding-bottom: 0.25rem;
            flex: 1;
        }
        .symbol {
            font-size: 1rem;
        }
        .product_name {
            font-size: 0.9375rem;
            flex: 1;
            line-height: 1.375rem;
        }
    }
    .commodity_details {
        padding: 1.25rem 0.625rem;
        box-sizing: border-box;
        width: 95%;
        border-radius: 0.75rem;
        margin: 0.625rem auto;

        background-color: #fff;
    }
    .select {
        padding: 1.25rem 0.625rem;
        box-sizing: border-box;
        width: 95%;
        border-radius: 0.75rem;
        margin: 0.625rem auto;
        height: 150px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .myselect {
        display: flex;
        .select_left {
            color: #959595;
            width: 3.125rem;
            display: flex;
            align-items: center;
        }
        .select_right {
            color: #464646;
            flex: 1;
            font-size: 0.9375rem;
        }
    }
}
footer {
    box-sizing: border-box;
    width: 100%;
    height: 3.125rem;
    border-top: 1px solid #f5f5f5;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 100;
    .buy {
        width: 100%;
        height: 100%;
    }
}
</style>
